<template>
  <div class="index-container">
    <el-row :gutter="10">
      <el-col :lg="24" :md="12" :sm="24" :xl="24" :xs="24">
        <el-card shadow="never">
          <div slot="header" class="header">
            <span><strong>批次存活记录每日报表</strong></span>
            <span><el-date-picker v-if="device == 'desktop'" v-model="time1" :default-time="['00:00:00', '23:59:59']"
                end-placeholder="结束时间" range-separator="至" start-placeholder="开始时间" style="width: 250px" type="daterange"
                value-format="timestamp" @change="timeChange1" /></span>
          </div>
          <el-row :gutter="20">
            <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
              <div v-if="device == 'mobile'">
                <el-date-picker v-model="startTime1" :clearable="false" placeholder="请选择开始时间" style="width: 100%"
                  type="datetime" value-format="timestamp" @change="timeChange1_1" />
              </div>
            </el-col>
            <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
              <div v-if="device == 'mobile'">
                <el-date-picker v-model="endTime1" :clearable="false" placeholder="请选择结束时间" style="width: 100%"
                  type="datetime" value-format="timestamp" @change="timeChange1_2" />
              </div>
            </el-col>
          </el-row>
          <el-empty v-if="tempData1.length == 0" :image-size="150" />
          <vab-chart v-else autoresize :option="data1" />
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :lg="24" :md="12" :sm="24" :xl="24" :xs="24">
        <el-card shadow="never">
          <div slot="header" class="header">
            <span><strong>批次存活记录总报表</strong></span>
            <span>
              <el-date-picker v-if="device == 'desktop'" v-model="time2" :default-time="['00:00:00', '23:59:59']"
                end-placeholder="结束时间" range-separator="至" start-placeholder="开始时间" style="width: 250px" type="daterange"
                value-format="timestamp" @change="timeChange2" />
            </span>
          </div>
          <el-row :gutter="20">
            <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
              <div v-if="device == 'mobile'">
                <el-date-picker v-model="startTime2" placeholder="请选择开始时间" style="width: 100%" type="datetime"
                  value-format="timestamp" @change="timeChange2_1" />
              </div>
            </el-col>
            <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
              <div v-if="device == 'mobile'">
                <el-date-picker v-model="endTime2" placeholder="请选择结束时间" style="width: 100%" type="datetime"
                  value-format="timestamp" @change="timeChange2_2" />
              </div>
            </el-col>
          </el-row>
          <el-empty v-if="tempData2.length == 0" :image-size="150" />
          <vab-chart v-else autoresize :option="data2" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { API_surviveRecord, API_surviveRecordDayA } from "@/api/report";
import VabChart from "@/plugins/echarts";
export default {
  name: "Index",
  components: {
    VabChart,
  },
  data() {
    return {
      loading1: false,
      time1: [],
      time2: [],
      //批次存活记录每日报表
      data1: {},
      data2: {},
      tempData1: [],
      tempData2: [],
      startTime1: new Date(new Date().getTime()).setHours(0, 0, 0, 0),
      endTime1: new Date(new Date().getTime()).setHours(23, 59, 59, 999),
      startTime2: "",
      endTime2: "",
    };
  },
  computed: {
    ...mapGetters({
      device: 'settings/device',
    }),
  },
  created() { },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.time1 = [this.startTime1, this.endTime1];
      this.surviveRecordDayA({
        startAt: this.startTime1,
        endAt: this.endTime1,
      });
      this.surviveRecord({});
    },
    async surviveRecordDayA({ startAt, endAt }) {
      this.loading1 = true;
      let { data } = await API_surviveRecordDayA({ startAt, endAt });
      this.loading1 = false;
      this.tempData1 = data;
      let xData =
        this.tempData1.map((item) => {
          return item.day;
        }) || [];
      let yData =
        this.tempData1.map((item) => {
          return item.percentage;
        }) || [];
      this.data1 = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: [
          "#1890FF",
          "#36CBCB",
          "#4ECB73",
          "#FBD437",
          "#F2637B",
          "#975FE5",
        ],
        backgroundColor: "rgba(252,252,252,0)",
        grid: {
          top: "4%",
          left: "2%",
          right: "4%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            axisTick: {
              alignWithLabel: true,
            },
            name: "日期",
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "批次",
          },
        ],
        series: [
          {
            name: "死亡率",
            type: "bar",
            barWidth: "30",
            data: yData,
          },
        ],
      };
    },
    async surviveRecord({ startAt, endAt }) {
      this.loading2 = true;
      let { data } = await API_surviveRecord({ startAt, endAt });
      this.loading2 = false;
      this.tempData2 = data;
      let xData =
        this.tempData2.map((item) => {
          return item.batchCode;
        }) || [];
      let yData =
        this.tempData2.map((item) => {
          return item.percentage;
        }) || [];
      this.data2 = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: [
          "#1890FF",
          "#36CBCB",
          "#4ECB73",
          "#FBD437",
          "#F2637B",
          "#975FE5",
        ],
        backgroundColor: "rgba(252,252,252,0)",
        grid: {
          top: "4%",
          left: "2%",
          right: "4%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            axisTick: {
              alignWithLabel: true,
            },
            name: "批次",
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "批次",
          },
        ],
        series: [
          {
            name: "死亡率",
            type: "bar",
            barWidth: "30",
            data: yData,
          },
        ],
      };
    },
    timeChange1(data) {
      if (data && data.length > 0) {
        this.surviveRecordDayA({ startAt: data[0], endAt: data[1] });
      } else {
        this.surviveRecordDayA({ startAt: "", endAt: "" });
      }
    },
    timeChange1_1(data) {
      if (data > this.endtTime1) return this.$baseMessage('开始时间不能大于结束时间', 'error')
      this.surviveRecordDayA({ startAt: data, endAt: this.endTime1 });
    },
    timeChange1_2(data) {
      if (data < this.startTime1) return this.$baseMessage('结束时间不能小于开始时间', 'error')
      this.surviveRecordDayA({ startAt: this.startTime1, endAt: data });
    },
    timeChange2(data) {
      if (data && data.length > 0) {
        this.surviveRecord({ startAt: data[0], endAt: data[1] });
      } else {
        this.surviveRecord({ startAt: "", endAt: "" });
      }
    },
    timeChange2_1(data) {
      this.surviveRecord({ startAt: data, endAt: this.endTime2 });
    },
    timeChange2_2(data) {
      this.surviveRecord({ startAt: this.startTime2, endAt: data });
    },
  },
};
</script>
<style lang="scss" scoped>
.index-container {
  padding: 0 !important;
  margin: 0 !important;
  background: #f5f7f8 !important;

  ::v-deep {
    .el-card__body {
      .echarts {
        width: 100%;
        height: 250px;
        margin-top: 20px;
      }
    }
  }
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
</style>
